<script>
import { useCounterStore } from "./stores/counter";
import { mapGetters, mapState, mapActions, mapWritableState } from "./pinia";
export default {
  computed: {
    ...mapState(useCounterStore, ["fruits"]),
    ...mapState(useCounterStore, { f: "fruits" }),
    // ...mapGetters(useCounterStore, ["doubleCount"]),
    ...mapState(useCounterStore, ["doubleCount"]),
    ...mapWritableState(useCounterStore, ["count"]), // 可读，可写
  },
  methods: {
    ...mapActions(useCounterStore, ["increment"]),
  },
  mounted() {
    console.log("pinia", this.$pinia);
  },
};
</script>

<template>
  <div>
    <h1>state.count: {{ count }}</h1>
    <h1>getters.doubleCount: {{ doubleCount }}</h1>
    <button @click="increment">increment</button>
    <button @click="count++">mapWritableState</button>
    <div v-for="item in fruits" :key="item">
      {{ item }}
    </div>

    <div v-for="item in f" :key="item">
      {{ item }}
    </div>
  </div>
</template>

<style></style>
